<template>
    <div id="home">
      <h1>Home</h1>
      <!-- 引入外部的js文件中的add函数 -->
      <button @click="add(1,2)">add</button>
      <br/>
      <br/>
      <!-- 路由跳转 -->
      <router-link to="/login">登录</router-link>
      <router-link to="/register">注册</router-link>

      <!-- 使用mint-ui中的button组件 -->
      <mt-button @click="tip" type="danger" size="large">danger</mt-button>

      <!-- 使用mint-ui中的header组件 -->
      <mt-header title="long long long long title">
        <router-link to="/helloworld" slot="left">
          <mt-button icon="back">back</mt-button>
        </router-link>
        <mt-button icon="more" slot="right"></mt-button>
      </mt-header>

      <!-- 使用mint-ui中的swipe轮播图组件 -->
      <div class="swipe-wrapper">
        <mt-swipe :auto="2000" class="swipe">
          <mt-swipe-item class="swip-item-1 item">1</mt-swipe-item>
          <mt-swipe-item class="swip-item-2 item">2</mt-swipe-item>
          <mt-swipe-item class="swip-item-3 item">3</mt-swipe-item>
        </mt-swipe>、
      </div>

      <!-- 使用mui中的9宫格样式 -->
      <div id="Gallery" class="mui-slider" style="margin-top:15px;">
        <div class="mui-slider-group">
          <div class="mui-slider-item">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
              <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-home"></span>
                <div class="mui-media-body">Home</div></a></li>
              <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
                <div class="mui-media-body">Email</div></a></li>
              <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-chatbubble"></span>
                <div class="mui-media-body">Chat</div></a></li>
              <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-location"></span>
                <div class="mui-media-body">location</div></a></li>
              <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-search"></span>
                <div class="mui-media-body">Search</div></a></li>
              <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-phone"></span>
                <div class="mui-media-body">Phone</div></a></li>
              <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-gear"></span>
                <div class="mui-media-body">Setting</div></a></li>
              <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-info"></span>
                <div class="mui-media-body">about</div></a></li>
              <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-more"></span>
                <div class="mui-media-body">more</div></a></li>
            </ul>
          </div>
        </div>
      </div>

      <!--图文列表 media list，右侧带导航箭头-->
      <div>
        <ul class="mui-table-view mui-table-view-chevron">
          <li class="mui-table-view-cell mui-media">
            <a class="mui-navigate-right">
              <img class="mui-media-object mui-pull-left" src="/static/images/cbd.jpg">
              <div class="mui-media-body">
                CBD
                <p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
              </div>
            </a>
          </li>
          <li class="mui-table-view-cell mui-media">
            <a class='mui-navigate-right' href="javascript:;">
              <img class="mui-media-object mui-pull-left" src="/static/images/yuantiao.jpg">
              <div class="mui-media-body">
                远眺
                <p class='mui-ellipsis'>静静的看这个世界，最后终于疯了</p>
              </div>
            </a>
          </li>
          <li class="mui-table-view-cell mui-media">
            <a class="mui-navigate-right">
              <img class="mui-media-object mui-pull-left" src="/static/images/shuijiao.jpg">
              <div class="mui-media-body">
                幸福
                <p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
  import {add} from '../common/js/calculate'
  import MtSwipe from "mint-ui/packages/swipe/src/swipe";
  import MtSwipeItem from "mint-ui/packages/swipe/src/swipe-item";
  import MtButton from "mint-ui/packages/button/src/button";
  import MtHeader from "mint-ui/packages/header/src/header";
    export default {
      components: {
        MtHeader,
        MtButton,
        MtSwipeItem,
        MtSwipe
      },
      name: "home",
      methods:{
          add,
        tip:function () {
          Toast('你好');
        }
      }
    }
</script>
<style scoped>
  html,body{
    width: 100%;
    height:100%;
    margin: 0;
  }
  .swipe-wrapper{
    margin: 30px auto;
    border:1px solid black;
  }
  .swipe{
    width: 100%;
    height: 150px;
    text-align: center;
  }
  .swiper-item-1{
    background-color: red;
  }
  .swiper-item-2{
    background-color: blue;
  }
  .swiper-item-3{
    background-color: green;
  }
  .item{
    border:1px solid black;
    padding:60px;
    text-align: center;
    font-size: 100px;
  }
</style>
